<template>
    <div>

        <el-row :gutter="20">
            <el-col :span="24">
                <mavon-editor
                        v-model="content"
                        ref="md" :toolbarsFlag="false"
                        @change="change" :editable="false" defaultOpen="preview" :subfield="false"
                        style="min-height: 600px"
                />
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import QRCode from 'qrcodejs2';

    import bus from '../components/common/bus';
    // 导入组件 及 组件样式
    import { mavonEditor } from 'mavon-editor';
    import 'mavon-editor/dist/css/index.css';
    import {AjaxByAll,apiPath} from '@/api/api';


    export default {
        name: 'dashboard',
        data() {
            return {
                name: localStorage.getItem('ms_username'),
                content:'', // 输入的markdown
                html:'',    // 及时转的html
            }
        },
        components: {
            mavonEditor
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
        created(){
            this.handleListener();


        },
        mounted(){
            let  requestForm={
                url:"https://gitee.com/starmark947618/starmark-gateway/raw/master/README.md"
            };
            AjaxByAll('post', 'sys/index/common/getPostData/sysIndexReadmeService', requestForm).then(data => {

                if (data.code === 200) {
                    this.content=data.data;
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'error'
                    });
                }

            });

        },
        activated(){
            this.handleListener();
        },
        deactivated(){

            bus.$off('collapse', this.handleBus);
        },
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                let formdata = new FormData();

                this.$upload.post('/上传接口地址', formdata).then(res => {
                    console.log(res.data);
                    this.$refs.md.$img2Url(pos, res.data);
                }).catch(err => {
                    console.log(err)
                })
            },
            // 所有操作都会被解析重新渲染
            change(value, render){
                // render 为 markdown 解析后的结果[html]
                this.html = render;
            },
            // 提交
            submit(){
                console.log(this.content);
                console.log(this.html);
            },
            qrcode() {
                let qrcode = new QRCode('qrcode', {
                    width: 200,
                    height: 200, // 高度
                    text: 'http://www.liuminqiu.com/mobile' ,// 二维码内容
                    // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    background: '#f0f',
                    foreground: '#ff0'
                })
                console.log(qrcode)
            },

            handleListener(){
                bus.$on('collapse', this.handleBus);

            },
            handleBus(msg){

            },

        }

    }

</script>


<style scoped>

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }



    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }



    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }



    .schart {
        width: 100%;
        height: 300px;
    }

</style>
